<template>
  <div class="ele-body">
    <a-card :borderd="false" title="出入柜信息">
      <table cellpadding="0" cellspacing="0" class="recepit_table2">
        <tbody>
          <tr>
            <td class="tit">柜台名称</td>
            <td>{{ info.name || '' }}</td>
            <td class="tit">负责人</td>
            <td>{{ info.charge_user_name || '' }}</td>
            <td class="tit">货品总数</td>
            <td>{{ info.num || 0 }}</td>
          </tr>
        </tbody>
      </table>
      <div class="margin-y-30">
        <a-space size="middle" class="analysis-tabs-extra">
          <a-radio-group v-model:value="checked" @change="toggleChange">
            <a-radio-button value="1">当前货品明细</a-radio-button>
            <a-radio-button value="2">领退货记录</a-radio-button>
          </a-radio-group>
        </a-space>
        <div v-if="checked == 1">
          <zbTable
            ref="tableRef1"
            :api-fun="group_goods_list"
            :store_group_code="query.store_group_code"
            @action="action"
          />
        </div>
        <div v-if="checked == 2">
          <zbTable
            ref="tableRef2"
            :api-fun="group_goods_log_list"
            :store_group_code="query.store_group_code"
            @action="action"
          />
        </div>
      </div>
    </a-card>

    <detail
      v-if="showDetail && goods_code"
      v-model:visible="showDetail"
      :goods_code="goods_code"
      :goods_category_code="goods_category_code"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import { DownOutlined, UpOutlined, PlusOutlined, ClearOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import { finishPageTab } from '@/utils/page-tab-util';
  import { actionFn } from '@/utils/action.js';
  import { uploadUrl } from '@/config/setting';
  import { daochuFn } from '@/utils/daochu.js';
  import zbTable from './components/churuguiIndex.vue';
  import detail from './components/detail.vue';
  import { get_detail, group_goods_list, group_goods_log_list } from '@/api/warehouse/goods_bound';

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  const info = ref({});
  const checked = ref('1');
  const showDetail = ref(false);
  const goods_code = ref(null);
  const goods_category_code = ref(null);

  onMounted(() => {
    get_detail({ id: query.code }).then((res) => {
      info.value = res;
    });
  });
  const toggleChange = (e) => {
    checked.value = e.target.value;
  };
  const action = (val) => {
    if (val.action_data.type == 'detail') {
      goods_code.value = val.row_data.code;
      goods_category_code.value = val.row_data.goods_category_code;
      showDetail.value = true;
    }
  };
</script>
<style scoped></style>
